<template>
  <el-dialog @close="btnCancel" title="新增角色" :visible="addRoleVisible">
    <el-form ref="form" :rules="rules" :model="formData" label-width="120px">
      <el-form-item prop="name" label="角色名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item prop="description" label="角色描述">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="btnCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addRole } from '@/api/setting'
export default {
  props: {
    // 控制弹层的显示
    addRoleVisible: {
      type: Boolean,
      default:false
    }
  },
  data() { 
    return {
      // 表单中的数据
      formData: {
        name: '',
        description:''
      },
      // 校验规则
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' },]
      }
    }
  },
  methods: {
    // 点击取消事件
    btnCancel() {
      this.$refs.form.clearValidate()
      this.$emit('update:addRoleVisible',false)
    },
    // 提交事件
    btnOk() {
      this.$refs.form.validate(async isOk => { 
        if (isOk) {
          // 校验通过，开始发送请求
          try {
            await addRole(this.formData, this.$refs.form.$el)
            // 当代码执行到此处说明添加成功，关闭弹层
            this.$emit('update:addRoleVisible', false)
            // 给主页传递一个自定义事件，给用户一点交互告诉用户新增完毕
            this.$emit('addRoleSuccess')
            // 最后清除表单的数据和校验结果
            this.$refs.form.resetFields()
          } catch (error) {
            // 可能出错的代码 try...catch起来 
            console.log('后台可能出现了一些错误，请稍后再试...',error);
          }
        }
      })
    }
  }
}
</script>

<style>

</style>